import { Tag } from 'antd';
import React from 'react';
// 可根据实际需求替换图标，这里假设使用了 @ant-design/icons 里的图标，若没有特殊图标需求，也可用普通字符等
import { AlipayCircleFilled, AndroidFilled, AppleFilled, GithubFilled } from '@ant-design/icons';

// 定义团队数据类型
interface Team {
  icon: React.ReactNode;
  name: string;
}

// 团队数据，可根据实际情况从接口获取等
const teamData: Team[] = [
  { icon: <AlipayCircleFilled style={{ color: '#108ee9' }} />, name: '科学搬砖组' },
  { icon: <AppleFilled style={{ color: '#dd001b' }} />, name: '全组都是吴彦祖' },
  { icon: <AndroidFilled style={{ color: '#a0c000' }} />, name: '中二少女团' },
  { icon: <GithubFilled style={{ color: '#000' }} />, name: '程序员日常' },
];

const TeamList: React.FC = () => {
  return (
    <div>
      <h3 style={{ marginBottom: '16px' }}>团队</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
        {teamData.map((item, index) => (
          <Tag
            key={index}
            icon={item.icon}
            style={{
              fontSize: '16px',
              padding: '8px 16px',
              border: 'none',
              background: 'transparent',
              cursor: 'default',
            }}
          >
            {item.name}
          </Tag>
        ))}
      </div>
    </div>
  );
};

export default TeamList;
